<template>
  <Layout>
    <div class="fade-in">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">订单详情</h2>
        <button @click="$router.back()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">
          <i class="fas fa-arrow-left mr-2"></i>返回订单列表
        </button>
      </div>

      <div v-if="loading" class="text-center text-gray-500 p-8">
        <i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
        <p>加载中...</p>
      </div>

      <div v-else-if="error" class="text-center text-red-500 p-8">
        <i class="fas fa-exclamation-circle text-4xl mb-4"></i>
        <p>{{ error }}</p>
      </div>

      <div v-else-if="order" class="bg-white rounded-xl shadow-sm p-6 order-details-card">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div>
            <h3 class="text-lg font-semibold text-gray-800 mb-3">订单信息</h3>
            <p class="mb-1"><strong>订单号:</strong> {{ order.id }}</p>
            <p class="mb-1"><strong>下单时间:</strong> {{ formatDateTime(order.order_date) }}</p>
            <p class="mb-1"><strong>总金额:</strong> ¥{{ order.total_amount.toFixed(2) }}</p>
            <p class="mb-1"><strong>状态:</strong>
              <span
                 class="px-2 py-1 rounded-full text-sm ml-2"
                  :class="{
                   'bg-blue-100 text-blue-800': order.status === 'pending',
                   'bg-green-100 text-green-800': order.status === 'completed',
                   'bg-red-100 text-red-800': order.status === 'cancelled'
                 }"
               >
                 {{ getStatusName(order.status) }}
              </span>
            </p>
            <!-- TODO: 显示收货地址等信息 -->
          </div>
          <div>
             <h3 class="text-lg font-semibold text-gray-800 mb-3">用户信息</h3>
             <p class="mb-1"><strong>用户名:</strong> {{ order.user?.username || 'N/A' }}</p>
             <p class="mb-1"><strong>邮箱:</strong> {{ order.user?.email || 'N/A' }}</p>
             <!-- TODO: 显示用户其他信息 -->
          </div>
        </div>

        <h3 class="text-lg font-semibold text-gray-800 mb-3">订单商品</h3>
        <div class="overflow-x-auto">
          <table class="min-w-full leading-normal divide-y divide-gray-200">
            <thead>
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  商品/宠物
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  类型
                </th>
                 <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  单价
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  数量
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  小计
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in order.items" :key="item.id">
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <!-- <img class="w-10 h-10 rounded-full mr-3" :src="item.image || '/default-placeholder.png'" alt="" /> -->
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                        {{ item.item_name }}
                      </p>
                    </div>
                  </div>
                </td>
                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                   <p class="text-gray-900 whitespace-no-wrap">{{ item.item_type === 'pet' ? '宠物' : '商品' }}</p>
                 </td>
                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                   <p class="text-gray-900 whitespace-no-wrap">¥{{ item.price.toFixed(2) }}</p>
                 </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <p class="text-gray-900 whitespace-no-wrap">
                    {{ item.quantity }}
                  </p>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <p class="text-gray-900 whitespace-no-wrap">
                    ¥{{ (item.price * item.quantity).toFixed(2) }}
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Layout from '../components/Layout.vue'
import { orderService } from '../services/api'
import moment from 'moment'

const route = useRoute()
const order = ref(null)
const loading = ref(true)
const error = ref(null)

const orderId = route.params.id

// 格式化日期时间
const formatDateTime = (dateTime) => {
  return moment(dateTime).format('YYYY-MM-DD HH:mm')
}

// 获取订单状态名称
const getStatusName = (status) => {
  const statuses = {
    pending: '待处理',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statuses[status] || status
}

// 加载订单详情
const loadOrderDetails = async () => {
  try {
    loading.value = true
    const data = await orderService.getById(orderId)
    order.value = data
  } catch (err) {
    error.value = err.response?.data?.error || '加载订单详情失败'
    console.error('Failed to load order details:', err)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (orderId) {
    loadOrderDetails()
  } else {
    error.value = '无效的订单ID'
    loading.value = false
  }
})
</script>

<style scoped>
.table-container {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.table-header {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* 美化卡片和表格 */
.order-details-card {
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.order-details-card h3 {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.order-details-card p strong {
    color: #424242; /* 深灰色 */
}

.order-details-card table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 16px;
}

.order-details-card thead tr {
  border-bottom: 1px solid #e0e0e0;
}

.order-details-card th {
  background-color: #f5f5f5; /* 与主内容区背景色一致 */
  color: #616161; /* 深灰色文字 */
  text-align: left;
  padding: 12px 24px; /* 增加内边距 */
  font-weight: 600;
}

.order-details-card tbody tr {
  border-bottom: 1px solid #eeeeee;
}

.order-details-card tbody tr:last-child {
  border-bottom: none;
}

.order-details-card td {
  padding: 12px 24px; /* 增加内边距 */
  vertical-align: middle;
}

/* 美化状态标签 */
.px-2.py-1.rounded-full.text-sm {
    padding: 4px 8px;
    border-radius: 9999px; /* 更圆的角 */
    font-weight: 600;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}
</style> 